<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn">发送请求</button>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
// 在浏览器使用:基于Promise对ajax进行封装
// 在node.js使用:基于Promise对象http进行封装
// Axios是VUE官方推荐使用的http请求库

let btn = document.querySelector('.btn')
btn.onclick = function (){

    // 发送get请求
    // axios.get('http://localhost:8080/users/list?a=123&b=456')
    // .then((res)=>{
    //     console.log( res )// {...}
    //     // promise成功的结果res并不是服务端相响应的数据
    //     // res是axios封装的响应对象(包含各种响应信息和响应数据)
    // })
    
    // axios.get('http://localhost:8080/users/list',{// config配置对象
    //     params: {
    //         a: 111,
    //         b: 222
    //     }
    // })
    // .then((res)=>{
    //     console.log( res )// {...}响应对象
    //     console.log( res.data )// 响应数据
    // })


    // 发送post请求
    // axios.post('http://localhost:8080/users/login',{// 参数对象
    //     user: 'jingjing',
    //     pass: '222222'
    // })
    // .then((res)=>{
    //     console.log( res.data )
    // })


    // 执行多个并发请求
    // axios.all([axios.get('http://localhost:8080/users/list'),axios.get('http://localhost:8080/users/data')])
    // .then((res)=>{
    //     // console.log( res )// [第一个请求的响应对象,第二个请求的响应对象]
    //     console.log( res[0].data )
    //     console.log( res[1].data )
    // })

    // axios.all([axios.get('http://localhost:8080/users/list'),axios.get('http://localhost:8080/users/data')])
    // .then(axios.spread((res1,res2)=>{
    //     console.log( res1 )// 第一个请求的响应对象
    //     console.log( res2 )// 第二个请求的响应对象
    // }))


    // 直接使用axios()发送请求
    // axios({// config配置对象
    //     method: 'post',
    //     url: 'http://localhost:8080/users/login',
    //     data: {
    //         user: 'xiaocuo',
    //         pass: '123123'
    //     }
    // })
    // .then((res)=>{
    //     console.log( res )// 响应对象
    //     console.log( res.data )// 请求结果
    // })

    axios({// config配置对象
        method: 'get',
        url: 'http://localhost:8080/users/list',
        params: {
            a: 'xiaocuo',
            b: '123123'
        }
    })
    .then((res)=>{
        console.log( res )// 响应对象
        console.log( res.data )// 请求结果
    })
    
}

</script>
</body>
</html>